<template>
	<div class="page_wrap">
		<ul class="technician_list clear_fix">
			<template v-for="(item,index) in roleList">
				<li :class="{'danger_bg':item.state==1,'normal_bg':item.state==2,'primary_bg':item.state==3,'checked':currentIndex == index}" @click="currentIndex=index;currentItem=item">
					<h2>技师编号：{{item.roleNo}}</h2>
					<p>技师名：{{item.roleName}}</p>
					<p>房间号：{{item.roleNo}}</p>
					<p>下钟时间:{{item.lastOpTime.time | formatDateFil}}</p>
					<button :class="{'current':item.state==1}" @click='webSocketSend(item,2,item.state==1)'>下钟</button>
					<button :class="{'current':item.state==2}" @click='webSocketSend(item,1,item.state==2)'>上钟</button>
					<button :class="{'current':item.state==2}" @click='webSocketSend(item,3,item.state==2)'>休息</button>
					<button :class="{'current':item.state==3}" @click='webSocketSend(item,2,item.state==3)'>上班</button>
				</li>
			</template>
		</ul>
		<div class="technicianDetail clear_fix" v-if="currentItem">
			<h2>技师编号：{{currentItem.roleNo}}</h2>
			<p>技师名称：{{currentItem.roleName}}</p>
			<p>技师编号：{{currentItem.roleNo}}</p>
			<p>下钟时间：{{currentItem.lastOpTime.time | formatDateFil}}</p>
			<p>工作状态：{{currentItem.state | setStateType}}</p>
		</div>
	</div>
</template>
<style>
	.page_wrap{
		position:relative;
	}

	.technician_list{
		margin:20px 0 200px;
		display:flex;
		flex-wrap:wrap;
		overflow-y:auto;
		overflow-x:hidden;
		padding:0;
	}

	.technician_list li{
		list-style:none;
		width:240px;
		margin:10px;
		padding:10px;
		color:#FFFFFF;
		border-radius:4px;
		cursor:pointer;
		border:2px solid transparent;
	}

	.technician_list h2{
		margin:0;
		font-weight:normal;
		font-size:16px;
	}

	.technician_list p{
		margin:0;
		line-height:1.5;
		font-size:14px;
	}

	.technician_list button{
		display:inline-block;
		border:0;
		background:#EEEEEE;
		color:#999999;
		border-radius:2px;
		cursor:pointer;
		margin:5px 0 0 0;
		padding:0 8px;
	}

	.technician_list .current{
		color:#000000;
	}

	.danger_bg{
		background:#FF5722;
	}

	.normal_bg{
		background:#1E9FFF;
	}

	.primary_bg{
		background:#009688;
	}

	.technician_list .checked{
		border:2px solid rgba(0, 0, 0, 0.5);
		box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5);
	}

	.technicianDetail{
		position:fixed;
		bottom:0;
		box-shadow:0 -2px 0 rgba(0, 0, 0, 0.5);
		background:#FFFFFF;
		left:230px;
		right:0;
		line-height:2;
		padding:10px 20px;
	}
</style>
<script>
	import {mapGetters,mapActions} from 'vuex'
	import {sendRequest} from '../../api/api'
	import util from '../../common/js/util'
	export default {
		data(){
			return {
				currentIndex:- 1,
				roleList:[],
				currentItem:false,
			}
		},
		beforeMount:function(){
			this.getRoleList();
		},
		computed:{
			// 使用对象展开运算符将 getters 混入 computed 对象中
			...mapGetters([
				'getCount'
				// ...
			]),
		},
		created(){
			//页面刚进入时开启长连接
			this.initWebSocket()
		},
		destroyed(){
			//页面销毁时关闭长连接
			util.webSocketAPI.close();
		},
		methods:{
			...mapActions([
				'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
				'decrement'
			]),
			initWebSocket(){ //初始化weosocket 
				var wsUrl = 'page7';
				util.webSocketAPI.create(this.webSocketOnMessage,wsUrl);
			},
			webSocketOnMessage(e){ //数据接收 
				var i;
				const resData = JSON.parse(e.data);
				const roleList = this.roleList;
				if(resData.roleNo){
					for(i=0;i<roleList.length;i++){
						if(roleList[i].roleNo == resData.roleNo){
							roleList[i].state = resData.state;
							break;
						}
					}
					this.roleList = roleList;
				}else{
					console.log(resData.msg);
				}
			},
			webSocketSend(rolesInfo,state,flag){//数据发送 
				var param;
				if(flag){
					param = {'rolesInfo':rolesInfo,'state':state};
					util.webSocketAPI.sendMessage(param);
				}
			},
			getRoleList(){
				sendRequest('/cartonOptimization/getRoleList3','',(data) =>{
					this.roleList = data.obj.roleList;
				})
			},
		},
		filters:{
			setStateType:function(state){
				let stateHtml;
				if(state == 1){
					stateHtml = "上钟中"
				}else if(state == 2){
					stateHtml = "轮钟中"
				}else{
					stateHtml = "休息中"
				}
				return stateHtml;
			},
			formatDateFil:function(date){
				return util.formatDate.format(new Date(date),'hh:mm:ss')
			},
		},
	}
</script>